<template>
    <div id='Article' >
        <nav-bar left-arrow left-text="返回" title="文章详情"  @click-left="$router.back()" />
        <div class="header-wrap">
            <!-- TODO title会抖动 考虑使用骨架屏 -->
            <h3 class="title">{{ articleData.title }}</h3>
            <div class="user-info">
                <div class="avatar">
                    <img v-lazy="articleData.aut_photo">
                </div>
                <div class="info">
                    <span class="name">{{ articleData.aut_name }}</span>
                    <span class="time">{{ formatTime(articleData.pubdate) }}</span>
                </div>
                <!-- 关注我按钮 -->
                <div class="follow-btn" :class="{ followed: articleData.is_followed }"
                    @click="handleFollowClick(articleData.is_followed)">
                    <van-icon name="plus" v-if="!articleData.is_followed" /> {{
                        articleData.is_followed ? '已关注' : '关注我'
                    }}
                </div>
            </div>
        </div>
        <div class="content-wrap" v-html="articleData.content" ref="contentRef" />
        <van-divider>END</van-divider>

        <!-- 点赞按钮 -->
        <div class="like-btn" @click="handleLikeClick(articleData.is_collected)">
            <van-icon name="good-job" v-if="articleData.is_collected" />
            <van-icon name="good-job-o" v-else />
            <span>{{ articleData.is_collected ? '已赞' : '点赞' }}</span>
        </div>
        <art-cmt @scroll-to-cmt="scrollToCmt" :collected="articleData.is_collected" @change-collected="changeCollected" />
    </div>
</template>

<script  setup>
import { NavBar, Icon as vanIcon, divider as vanDivider, Toast } from 'vant'
import { getArticleContent, followUser, unfollowUser, articleLike, articleUnLike } from '@/api'
import { onMounted, onUpdated, ref } from 'vue'
import moment from 'moment'
import { useRoute } from 'vue-router'
import ArtCmt from '@/components/ArtCmt.vue'
import hljs from 'highlight.js'
import { animate } from 'popmotion'
import 'highlight.js/styles/base16/phd.css'
const route = useRoute()
const contentRef = ref(null)
onMounted(() => {
    // 初始化代码高亮
    hljs.highlightAll()
})
// 获取v-html生成的dom
onUpdated(() => {
    contentRef.value.querySelectorAll('.copy-code-btn').forEach(item => {
        item.innerHTML = '<i class="iconfont icon-copy"> COPY </i>'
        // 为item绑定点击复制事件
        item.addEventListener('click', () => {
            const code = item.parentNode.innerText
            // 将代码复制到剪贴板
            navigator.clipboard.writeText(code)
            Toast.success('代码已复制到剪贴板')
        })
    })
})

// 文章数据
const articleData = ref('')
// 改变收藏状态
const changeCollected = (val) => { articleData.value.is_collected = val }
// 获取文章信息
const scopeArticle = async () => {
    const { data: { data } } = await getArticleContent(route.params.id)
    articleData.value = data
}
scopeArticle()

// 关注按钮
const handleFollowClick = (followed) => {
    if (followed) {
        unfollowUser(articleData.value.aut_id).then(() => {
            articleData.value.is_followed = false
        })
    } else {
        followUser(articleData.value.aut_id).then(() => {
            articleData.value.is_followed = true
        })
    }
}

// 点赞按钮
const handleLikeClick = (collected) => {
    if (collected) {
        articleUnLike(articleData.value.art_id).then(() => {
            articleData.value.is_collected = false
        })
    } else {
        articleLike(articleData.value.art_id).then(() => {
            articleData.value.is_collected = true
        })
    }
}

// 格式化时间函数
const formatTime = (time) => {
    const res = Math.abs(parseInt(moment(time, 'YYYY-MM-DD hh:mm:ss').diff(moment()) / 1000))

    if (res < 60) return `${res} 秒前`
    else if (res < 3600) return `${Math.floor(res / 60)} 分钟前`
    else if (res < 86400) return `${Math.floor(res / 3600)} 小时前`
    else if (res < 604800) return `${Math.floor(res / 86400)} 天前`
    else if (res < 2592000) return `${Math.floor(res / 604800)} 周前`
    else if (res < 31536000) return `${Math.floor(res / 2592000)} 月前`
    else return `${Math.floor(res / 31536000)} 年前`
}

// 滚动到评论列表
const scrollToCmt = (target) => {
    const nowTop = window.scrollY
    animate({
        from: nowTop,
        to: target,
        duration: 500,
        onUpdate: latest => window.scrollTo(0, latest)
    })
}

</script>

<style lang='less'>
#Article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // 兼容滚动条
    -webkit-overflow-scrolling: touch;
    .header-wrap {
        padding: 10px;
        padding-top: 20px;

        .title {
            font-size: 16px;
            font-weight: bold;
            margin: 0;
            line-height: 20px;
            padding-right: 10px;
            letter-spacing: 1px;
            // 多余内容省略号显示
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: 2;
        }

        .user-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 10px;
            border-bottom: 1px solid rgba(0, 0, 0, .05);

            .avatar {
                width: 55px;
                height: 55px;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                flex: 1;
                align-self: stretch;
                padding: 8px 10px;
                display: flex;
                flex-flow: column;
                justify-content: space-between;
                align-items: flex-start;

                .time {
                    color: #999;
                    font-size: 12px;
                }
            }

            .follow-btn {
                font-size: 12px;
                padding: 4px;
                border: 1px solid #3579f7;
                color: #3579f7;
                border-radius: 4px;
            }

            .followed {
                background-color: #3579f7;
                color: #fff;
            }
        }
    }

    .like-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        font-size: 14px;
        color: #3579f7;
        border-radius: 4px;
        background-color: #fff;
        margin: 10px auto;
        border: 1px solid #3579f7;

        .van-icon {
            margin-right: 5px;
            font-size: 16px;
        }
    }

    // 文章内容样式
    .content-wrap {
        padding: 0 10px;
        font-size: 16px;
        line-height: 1.5;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;

        p {
            text-indent: 2em;
        }

        blockquote {
            margin: 0;
        }

        ul {
            li {
                margin-left: 10px;
                list-style: none
            }

            li::before {
                content: '\e627';
                font-family: 'iconfont';
                font-size: 14px;
                margin-right: 5px;
            }
        }

        pre {
            overflow: auto;

            code {
                font-size: 12px;

                .copy-code-btn {
                    padding-top: 5px;
                    display: block;

                    .iconfont {
                        font-size: 12px !important;
                    }
                }
            }
        }

    }
}
</style>
